<template>
  <div id="app">
    <h1>第一天</h1>
    <div>{{msg}}</div>
    <input type="text" v-model="info" />
    <button v-on:click="handlerClick">添加</button>
    <ul>
      <!-- <li v-for="item in list">{{item.text}}</li> -->
      <todo-item v-for="item in list" :todo="item" :key="item.id">
        <template v-slot:item="itemProps">
          <span :style="{fontSize:'20px',color:itemProps.checked?'red':'blue'}">{{item.text}}</span>
        </template>
        <!-- <span slot="item=itemProps"  style="font-size:20px">{{item.text}}</span> -->
        <!-- <span v-slot="item1" :style="{fontSize:'20px',color:item1?'red':'blue'}">{{item.text}}</span> -->
      </todo-item>
    </ul>
    <h1>第二天</h1>
    <el-tabs :tab-position="tabPosition" style="height: 200px;">
      <el-tab-pane label="属性">
        <Props 
          name="Hello Vue" 
          :type="type" 
          class="myClass"
          :class="myClass2"
          :isVisible="true"
          :onChange="propsChangeType"
        />
      </el-tab-pane>
      <el-tab-pane label="事件">
        <events
          :name="eventName"
          @change="change"
        />
      </el-tab-pane>
      <el-tab-pane label="插槽">角色管理</el-tab-pane>
    </el-tabs>
    <h1>测试</h1>
    <div>
      <span v-bind:class="{active:listActive}" @click="selectList">第一</span>&nbsp;&nbsp;&nbsp;&nbsp;
      <span v-bind:class="{active:auditActive}" @click="selectAudit">第二</span>
      <div v-if="listActive">
          容器一
      </div>
      <div v-if="auditActive">
          容器二
      </div>
    </div>
  </div>
</template>

<script>
import TodoItem from "./components/TodoItem.vue";
import Props from "./components/Props.vue";
import Events from "./components/Events.vue";
export default {
  name: "app",
  data() {
    return {
      msg: "Hello Vue",
      info: "",
      list: [],
      tabPosition: "left",
      myClass2:"myClass2",
      type:"success",
      eventName:'',
      listActive:true,
      auditActive:false,
    };
  },
  computed: {
  classObject: function () {
    return {
      active: this.isActive && !this.error,
      'text-danger': this.error && this.error.type === 'fatal'
    }
  }
},
  methods: {
    handlerClick() {
      var todo = {};
      todo.id = Math.random();
      todo.text = this.info;
      this.list.push(todo);
      this.info = "";
    },
    propsChangeType:function(v){
      this.type = v;
    },
    change:function(v){
        this.eventName = v;
    },
    selectList:function(){
      this.listActive = true;
      this.auditActive = false;
    },
    selectAudit:function(){
      this.listActive = false;
      this.auditActive = true; 
    }
  },
  components: {
    TodoItem,
    Props,
    Events
  }
};
</script>

<style>
  .active{
    color:red;
  }
</style>
